<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="/blogs/commons/bootstrap3/css/bootstrap.css">
	<link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/font-awesome.4.6.0.css">
	<link href="/blogs/commons/css/froala_editor.css" rel="stylesheet" type="text/css">
    <script src="/blogs/commons/js/jquery-1.10.2.js"></script>
    <script src="/blogs/commons/bootstrap3/js/bootstrap.js"></script>
    <script src="/blogs/commons/bootstrap3/js/bootstrap.min.js"></script>
    <script src="/blogs/commons/js/froala_editor.min.js"></script>
    <!--[if lt IE 9]>
    <script src="/blogs/commons/js/froala_editor_ie8.min.js"></script>
    <![endif]-->
    <script src="/blogs/commons/js/plugins/tables.min.js"></script>
    <script src="/blogs/commons/js/plugins/lists.min.js"></script>
    <script src="/blogs/commons/js/plugins/colors.min.js"></script>
    <script src="/blogs/commons/js/plugins/media_manager.min.js"></script>
    <script src="/blogs/commons/js/plugins/font_family.min.js"></script>
    <script src="/blogs/commons/js/plugins/font_size.min.js"></script>
    <script src="/blogs/commons/js/plugins/block_styles.min.js"></script>
    <script src="/blogs/commons/js/plugins/video.min.js"></script>

    <style>
        body {
            text-align: center;

        }

        section {
            width: 80%;
            margin: auto;
            text-align: left;
        }
        #title{
            display: block;
            width: 100%;
            height: 40px;
            line-height: 40px;
            box-sizing: border-box;
            padding: 0 16px;
            border: 1px solid grey;
            background-color: rgba(0,0,0,0);
            color: #4f4f4f;
        }

        #sub{
            margin-top: 30px;
            width: 100px;
            height: 50px;
            font-size: 30px;
            cursor: pointer;
            border: 1px solid #C92027;
            color: #C92027;
            background-color: transparent;
            background-image: none;
            display: inline-block;
            font-weight: 400;
            text-align: center;
            white-space: nowrap;
            vertical-align: middle;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            padding: .375rem .75rem;
            font-size: 1.5rem;
            line-height: 1.5;
            border-radius: .25rem;
            transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
        }

        #sub:hover{
            background: #C92027;
            color: #ffffff;
            border-color: #dc3545;
        }



    </style>
</head>

<body>
<section id="editor">
    <div class="page-header">
        <h1>分享你的所见所闻 <small>Post what you see and hear</small></h1>
    </div>
    <form action="/blogs/articleController/upLoadContent" method="post">
        <input type="text" id="title" name="title" placeholder="请输入文章标题" required="required">
        <div id='edit' style="margin-top: 30px; ">

        </div>
        <input type="hidden" name="content" id="content">



        <input type="submit" id="sub" value="发布文章">

    </form>

</section>

  <script>
      $(function(){
          $('#edit').editable({inlineMode: false, alwaysBlank: true})
      });
  </script>

  <!--&lt;!&ndash;随意拖动图片&ndash;&gt;-->
  <!--<script>-->
      <!--$(function() {-->
          <!--$('div#froala-editor').froalaEditor({-->
              <!--dragInline: false,-->
              <!--toolbarButtons: ['bold', 'italic', 'underline', 'insertImage', 'insertLink', 'undo', 'redo'],-->
              <!--pluginsEnabled: ['image', 'link', 'draggable']-->
          <!--})-->
      <!--});-->
  <!--</script>-->


  <script>
      $("#sub").click(function () {
          var c = $('#edit')[0].childNodes[1].innerHTML;
          $("#content").val(c)
      })
  </script>


    <!--图片上传-->
<script>
    $(function(){
            $("input[type=file]").change(function(){$(this).parents(".uploader").find(".filename").val($(this).val());});
            $("input[type=file]").each(function(){
            if($(this).val()==""){$(this).parents(".uploader").find(".filename").val("No file selected...");}
        });
    });
</script>

</body>
</html>
